<template>

  <div>
    <el-button-group style="margin: 0px 500px 30px">
        <el-button size="mini" :type="wholeReceptionButton" @click="wholeReception">分散式</el-button>
        <el-button size="mini" :type="myReceptionButton" @click="myReception" >集中式</el-button>
    </el-button-group>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="省">
        <el-select v-model="formInline.province" placeholder="省" @change="changeSheng">
          <el-option label="省" value=""></el-option>
          <el-option v-for="i in ss" :label="i.REGION_NAME" :value="i.REGION_ID" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="市">
        <el-select v-model="formInline.city" placeholder="市" @change="cahnegShi">
          <el-option label="市" value=""></el-option>
          <el-option v-for="i in sss" :label="i.REGION_NAME" :value="i.REGION_ID" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区" >
        <el-select v-model="formInline.county" placeholder="区" @change="changeQu" >
          <el-option label="区" value=""></el-option>
          <el-option v-for="i in ssss" :label="i.REGION_NAME" :value="i.REGION_ID" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-input v-model="formInline.preName" placeholder="搜索：小区名，公寓名，房间号，租客名"
        style="width:500px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <!--0.全部 1.空置可租 2.收费提醒 3.合同快到期 4.欠费提醒 5.合同已到期 6.装修维护-->
    <el-radio-group v-model="activeName">
      <el-radio-button label="0"  >全部</el-radio-button>
      <el-radio-button label="1" >空置可租</el-radio-button>
      <el-radio-button label="2" >收费提醒</el-radio-button>
      <el-radio-button label="3" >合同快到期</el-radio-button>
      <el-radio-button label="4" >欠费提醒</el-radio-button>
      <el-radio-button label="5" >合同已到期</el-radio-button>
      <el-radio-button label="6" >装修维护</el-radio-button>
    </el-radio-group>



    <el-table
      :data="tableData"
      stripe
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      style="width: 100%">
      <el-table-column
        prop="houseId"
        label="地址"
        width="180" >
        <template scope="scope">
          <div @click="ask(scope.row)">
            {{scope.row.buildingNo}}栋{{scope.row.unitNo}}单元{{scope.row.roomNo}}
          </div>

        </template>
      </el-table-column>
      <el-table-column
        prop="preName"
        label="公寓名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="vacancyDate"
        label="空置时间">
      </el-table-column>
      <el-table-column
        prop="leaseType"
        label="租房状态">
        <template scope="scope">
          {{scope.row.leaseType==1?"合租":"整租"}}
        </template>
      </el-table-column>
      <el-table-column
        prop="publishStatus"
        label="发布状态">
        <template scope="scope">
            {{scope.row.publishStatus==0?"未发布":"已发布"}}
        </template>
      </el-table-column>
      <el-table-column
        prop="rental"
        label="房租">
        <template scope="scope">
          {{scope.row.rental}}/元
        </template>
      </el-table-column>
      <el-table-column
        prop="roomCount"
        label="套">
        <template scope="scope">
          <span v-if="scope.row.floor!=0">
            房间数：{{scope.row.floor}}套
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作"
      width="200px">
            <template scope="scope">
                  <!-- <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>-->
                   <el-button type="danger" size="mini" icon="el-icon-delete" @click="openDel(scope.row)">删除</el-button>
                   <el-button type="warning" size="mini" icon="el-icon-s-help" @click="openFc(scope.row)" >{{scope.row.publishStatus==0?"发布":"取消发布"}}</el-button>
            </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.formInline.pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="this.formInline.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.formInline.total">
    </el-pagination>



    <!--消息提示-->
    <el-dialog
      title="信息"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <div>

        <div>
          {{this.tableTemBle.roomCode}}
          <el-divider></el-divider>
          <h3>金融服务</h3>
          <span>金融产品：-</span><br>
          <span>合同号：-</span><br>
          <span>申请时间：-</span><br>
          <span>总金额(授信后)：-</span><br>
        </div>

        <div>

          <el-divider></el-divider>
          <h3>房源详情</h3>
            <span>房源地址:{{tableTemBle.buildingNo}}栋{{tableTemBle.unitNo}}单元{{tableTemBle.roomNo}}</span>
            <span>户型:</span><br>
            <span>面积:{{tableGh.proportion}}平方米</span><br>
            <span>标价:{{tableTemBle.rental}}/元</span><br>
            <span>付款方式:押0付0</span><br>
        </div>
        <div>

          <el-divider></el-divider>
          <h3>房源状态</h3>
          <span>空置</span><br>
        </div>
        <div>
          <el-divider></el-divider>
          <h3>租约信息</h3>
          <span v-if="this.tableTemBle.vacancyDate!=0">
            状态:空置{{tableTemBle.vacancyDate}}天</span><br>

        </div>


      </div>

    </el-dialog>





  </div>


</template>

<script>
import { queryRegionList,findPageByFs } from '@/api/houses/fangtai/fangtai'
import { updateFc,DelFc } from '@/api/houses/fangtai/fangtai'
import { queryHouse } from '@/api/houses/housing/hous'
export default {
  name: "list",
  data() {
    return {
      //切换按钮
      wholeReceptionButton: "warning",
      myReceptionButton: "",
      //查询
      formInline: {
        province: "",
        city: "",
        county: "",
        preName: "",
        hostType: "0",
        fangtaiType: "0",
        pageNum: "1",
        pageSize: "10",
        total:""
      },
      ss: [],
      sss: [],
      ssss: [],
      tableData:[],
      activeName: "0",
      loading:false,
      dialogVisible:false,
      tableTemBle:{
        roomCode:"",
        buildingNo:"",
        unitNo:"",
        roomNo:"",
        vacancyDate:"",
        rental:"",
        houseId:""
      },
      fromHOSu:{
        houstId:"",
        publishStatus:""
      },
      tableGh:{
        proportion:""
      }

    }
  },
  // 监听
  watch: {
    'activeName': function (val) { //监听切换状态-计划单
      // 注释，根据val的不同，跳转到不同
      let that = this;
      that.formInline.fangtaiType = val;
      that.getList();
    }
  },
    methods: {

      handleSizeChange(val) {
        this.formInline.pageSize=val;
        this.getList();
        console.log(`每页 ${val} 条`);

      },
      handleCurrentChange(val) {
        this.formInline.pageNum=val;
        this.getList();
        console.log(`当前页: ${val}`);
      },

      getList(){
        findPageByFs(this.formInline).then(response =>{

          if(response==""&&response==null&&response==undefined){
             that.loading=true;
          }
          let that = this;
          that.tableData=response.list;

          that.formInline.pageNum=response.pageNum;
          that.formInline.pageSize=response.pageSize;
          that.formInline.total=response.total;
        });
      },

      //分散式
      wholeReception() {
        this.wholeReceptionButton = "warning";
        this.myReceptionButton = "";
        this.formInline.hostType="0";
        this.getList();

      },
      //集中式
      myReception() {
        this.wholeReceptionButton = "";
        this.myReceptionButton = "warning";
        this.formInline.hostType="1";
        this.getList();

      },
      ask(that){
        //显示信息
        this.dialogVisible=true;
        /*alert(JSON.stringify(that));*/
        this.tableTemBle.roomCode=that.roomCode
        this.tableTemBle.buildingNo=that.buildingNo;
        this.tableTemBle.unitNo=that.unitNo
        this.tableTemBle.roomNo=that.roomNo;
        this.tableTemBle.vacancyDate= that.vacancyDate;//空置天数
        this.tableTemBle.houseId = that.houseId;

        /*alert(JSON.stringify(that.houseId));*/
        queryHouse(this.tableTemBle).then(response=>{
          this.tableGh.proportion = response.proporties;
        /*  alert(JSON.stringify(response));*/
        });
      },
      //查询
      onSubmit() {
          this.getList();
      },
      //省
      changeSheng() {
        queryRegionList({parentId: this.formInline.province}).then(response => {
          this.sss = response;
        })
      },
      //市
      cahnegShi() {
        queryRegionList({parentId: this.formInline.city}).then(response => {
          this.ssss = response;
        })
      },
      Mytest(id) {
        alert(JSON.stringify(id.name));
      },
      //删除
      openDel(that) {
        this.$confirm('确定要要删除', '提示信息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //删除房源状态

          /*alert(JSON.stringify(that.houseId));*/

            DelFc({houstId:that.houseId}).then(response=>{
              if(response>0){
                this.$message.success("删除成功");
                this.getList();
              }
          });
        }).catch((error) => {
          console.log(error);
        });
      },
      openFc(that){
        if(that.publishStatus==0){
          //未发布
          /* alert(JSON.stringify(that.publishStatus));*/
          this.$confirm('确定要发布房产吗?', '提示信息', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            /* alert(JSON.stringify(that.houseId));*/
            this.fromHOSu.publishStatus="1";
            this.fromHOSu.houstId=that.houseId;
            updateFc(this.fromHOSu).then(response=>{
               if(response>0){
                 this.$message.success("成功发布");
                 this.getList();
               }
            });
          }).catch((error) => {
            console.log(error);
          });

        }else{
          //已发布
          this.$confirm('确定要取消发布吗?', '提示信息', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
             that.publishStatus="0";
            updateFc(that).then(response=>{
              if(response>0){
                this.$message.success("成功");
                this.getList();
              }
            });
          }).catch((error) => {
            console.log(error);
          });
        }

      }

    },
    created() {
      //省
      queryRegionList({parentId: "1"}).then(response => {
        this.ss = response;
      });
      this.ss = "";
      this.sss = "";
      this.ssss = "";

      this.getList();
    }
}
</script>

<style scoped>

</style>
